<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/chapter.css" />
	</head>
	<body style="background-color: #F8FAFC">
		<!-- 导航 -->
		<img src="https://s3.ax1x.com/2021/01/12/sGDomF.png" class="imgaes">
		<div class="Admission">
			<p>免费课程</p>
			<p>职业路径</p>
			<p>实战</p>
			<p>猿问</p>
			<p>手记</p>
			<p>找工作</p>
		</div>
		<div>
			<p style="border: #A9A9A9 solid 1px;width: 14%;" class="works"></p>
		</div>
		<div class="lookup">
			<p class="front">前端入门</p>
			<p class="introduction">JAVA入门</p>
			<img src="https://s3.ax1x.com/2021/01/12/sGyjlq.png">
		</div>
		<div class="download">
			<p style="color: gray;">下载APP</p>
			<div class="downloads">
				<img src="img/购物%20车%20(2).png">
				<p style="margin-top: -28px;margin-left: 38%;">购物车</p>
			</div>
			<div><img src="img/铃铛.png" style="width: 35px;height: 35px;margin-top: -9px;margin-left: 40%;"></div>
			<div><img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=748295655,694525269&fm=111&gp=0.jpg" style="width: 45px;height: 45px;border-radius: 50%;margin-top: -15px;margin-left: 95%;"></div>
		</div>
		<!-- 动画基础 -->
		<div style="background-image: url(https://img.xiaopiu.com/userImages/img49216498591f98.jpg);width: 100%;height: 200px;">
			<div style="color: gray;font-size: 14px;margin-left: 20%;position: absolute;margin-top: 20px;">
				课程 \ UI设计 \ 动效动画 \ UI动效基础与实践
			</div>
			<div style="font-size: 29px;color: white;margin-left: 20%;position: absolute;margin-top: 60px;">
				UI动效基础与实践
			</div>
			<div>
				<img src="https://img.xiaopiu.com/userImages/img5021649862f720.jpg" style="border-radius: 50%;margin-top: 110px;width: 55px;height: 55px;margin-left: 20%;">
				<div style="color:white;font-size: 13px;margin-top: -65px;margin-left: 24%;line-height: 30px;">
					<p>文孝一</p>
					<img src="https://img.xiaopiu.com/userImages/img5061649867ae28.png" style="width: 20px;height: 20px;margin-top: -25px;position: absolute;margin-left: 3%;">
					<p>UI设计师</p>
				</div>
				<div style="color: white;font-size: 12px;margin-left: 35%;margin-top: -92px;">
					难度 入门 · 时长 2小时50分 · 学习人数 745 · 综合评分10.0
				</div>
				<img src="https://s3.ax1x.com/2021/01/13/stZtUJ.png" style="margin-left: 70%;margin-top: -60px;position: absolute;">
			</div>
		</div>
		<div style="background-color: white;width: 330px;height: 600px;border-radius: 20px;margin-left: 65%;margin-top: -80px;">
			<div style="display: flex;justify-content: space-between;width: 80%;margin-left: 10%;padding-top: 20px;">
				<p>已学0%</p>
				<p style="color: gray;font-size: 12px;">已耗时0分</p>
			</div>
			<div style="background-color: #E8E8E8;width: 80%;border-radius: 20px;height: 15px;margin-left: 10%;margin-top: 10px;">
			</div>
			<p style="color: gray;font-size: 12px;margin-top: 20px;margin-left: 12%;">上次学至 1-1 动效设计</p>
			<button type="button" style="background-color: #F20D0D;width: 80%;margin-left: 10%;border: white solid;color: white;height: 50px;border-radius: 40px;margin-top: 20px;">继续学习</button>
			<div>
				<p style="font-size: 15px;margin-left: 9%;margin-top: 10px;">课程须知</p>
				<div>
					<p style="color: gray;font-size: 13px;line-height: 30px;margin-left: 8%;margin-top: 10px;">1、掌握基本的Ae操作，对Ae软件有一定的了解
						<br>2、足够的练习时间</p>
				</div>
			</div>
			<div>
				<p style="font-size: 15px;margin-left: 9%;margin-top: 10px;">老师告诉你能学到什么？</p>
				<div>
					<p style="color: gray;font-size: 13px;line-height: 35px;margin-left: 8%;margin-top: 10px;">1、为什么要做动效交互
						<br>2、工作中动效需求的理解及分析
						<br>3、Ae主流自带插件的应用与拓展
						<br>4、动效设计的交付与产出
						<br>5、Ae三方插件的延伸</p>
				</div>
			</div>

		</div>
		<div style="display: flex;width: 30%;justify-content: space-around;font-size: 24px;margin-top: -500px;margin-left: 20%;">
			<h6 style="color: red;">课程章节</h6>
			<h6>问答评论</h6>
			<h6>同学笔记</h6>
			<h6>用户评价</h6>
		</div>
		<div style="background-color: white;width: 783px;height: 160px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				文本简介：现在来看，UI的本职工作内容随着互联网产品的发展，慢慢的在做横向延伸，产品，交互，动效，建模，视觉<br>
				我们都要涉及。这次课程的中心就在于为大家讲解在工作当中，我们遇到的动效交互的需求、设计技巧以及和开发对接过<br>
				程中的产出交付环节，其中效果的延伸与讲解，主要围绕两方面，第一就是满足当下的工作需求，第二满足本身作品的包<br>装需求
			</div>
		</div>
		<div style="background-color: white;width: 783px;height: 160px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				第1章 为什么要做动效设计<br>
				从互联网产品的底层逻辑及交互当中去了解动效设计的实际价值与意义<br>
				<div style="margin-top: 20px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">1-1 动效设计 (12:15)</p>
					</div>
				</div>
			</div>
		</div>
		<div style="background-color: white;width: 783px;height: 160px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				第2章 动效需求的分析与交付<br>
				UI工作当中动效需求下达及交付形式和产出的主要流程<br>
				<div style="margin-top: 20px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">2-1 动效设计 (12:15)</p>
					</div>
				</div>
			</div>
		</div>
		<div style="background-color: white;width: 783px;height: 460px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				第2章 动效需求的分析与交付<br>
				UI工作当中动效需求下达及交付形式和产出的主要流程<br>
				<div style="margin-top: 20px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-1 表达式、运动模糊、速度曲线 (17:01)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-2 形状工具（1） (13:20)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-2 形状工具（2） (18:50)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-4 父子集关系 (15:00)(13:20)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-5 particular (15:20)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-6 particular制作文字 (19:50)</p>
					</div>
				</div>
				<div style="margin-top: 10px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">3-7 particular延伸 (13:26)</p>
					</div>
				</div>
			</div>
		</div>
		<div style="background-color: white;width: 783px;height: 160px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				第4章 综合案例<br>
				综合上述所有插件以及技巧，制作一个完整的交互动效demo<br>
				<div style="margin-top: 20px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">4-1 综合案例（1）(17:01)</p>
					</div>
				</div>
			</div>
		</div>
		<div style="background-color: white;width: 783px;height: 160px;border-radius: 20px;margin-top: 25px;margin-left: 17%;">
			<div style="font-size: 14px;line-height: 22px;padding-top: 30px;margin-left: 2%;">
				第5章 课后总结<br>
				梳理全篇知识点<br>
				<div style="margin-top: 20px;">
					<div style="display: flex;">
						<img src="img/视频%20(1).png">
						<p style="color: gray;margin-top: 5px;margin-left: 2%;">5-1 课后总结 (07:51)</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 推荐课程 -->
		<div style="margin-left: 65%;margin-top: -900px;">
			推荐课程
		</div>
		<div style="margin-left: 65%;margin-top: 20px;">
			<img src="https://img.xiaopiu.com/userImages/img54116498a4af58.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
			<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
				高薪设计师必修课 AE移动UI动效...
				<div>
					<p>￥199.00 · 中级 · 78</p>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img53816498a48848.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					抖音级短视频App交互设计系统学...
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img53916498a497e8.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					移动端App UI 设计入门与实战
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img54016498a4a3a0.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					App界面设计利器Sketch 精选案...
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>

		</div>
		<div style="margin-left: 65%;margin-top:20px;">
			推荐课程
		</div>
		<div style="margin-left: 65%;margin-top: 20px;">
			<img src="https://img.xiaopiu.com/userImages/img54316498aed118.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
			<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
				《MAYA-场景设置》
				<div>
					<p>￥199.00 · 中级 · 78</p>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img54416498aed8e8.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					MAYA四足动画
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img54516498aee888.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					MAYA-材质基础入门
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img54616498aef828.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					MAYA- NURBS曲线建模
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;">
				<img src="https://img.xiaopiu.com/userImages/img54716498aefff8.jpg" style="width: 78px;height: 58px;border-radius: 10px;">
				<div style="color: gray;font-size: 14px;line-height: 30px;margin-left: 15%;margin-top: -65px;">
					C4D创意字母教程
					<div>
						<p>￥199.00 · 中级 · 78</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部导航 -->
		<div style="background-color: #1C1F21;height: 200px;margin-top: 200px;">
			<div style="width: 40%;display: flex;justify-content: space-around;font-size: 13px;color: gray;margin-top: 70px;margin-left: 25%;position: absolute;">
				<div>企业合作</div>
				<div>人才招聘</div>
				<div>联系我们</div>
				<div>讲师招募</div>
				<div>常见问题</div>
				<div>意见反馈</div>
				<div>慕课大学</div>
				<div>友情链接</div>
			</div>
			<div style="font-size: 14px;color: gray;margin-left: 26%;margin-top: 110px;position: absolute;">
				 © 2018 imooc.com  京ICP备 12003892号-11
			</div>
			<div>
				<img src="https://s3.ax1x.com/2021/01/12/sYYooq.png"style="margin-left: 70%;margin-top: 40px;">
			</div>
		</div>
	</body>
</html>
